{% extends "base.html" %}

{% block content %}
<h1>Published Stories</h1>
{% if story_list %}
	<p>The following stories are available to read:</p>
	<div id="story_list"> 
	{% for story in story_list %}
		<div class="story_box">
			<img class="story_illustration" src="/static/illustrations/{{story.id}}.jpg" alt="No illustration">
			<div class="story_info">
				<div class="story_title_div">
					<a class="story_title" href="/story/{{story.id}}">{% if story.latest.title %}{{story.latest.title}}{% else %}Untitled story{% endif %}</a>
					by <a href="/user/{{story.owner.username}}/">{{story.owner.username}}</a>
				</div>
				<p>{{story.latest.description}}</p>
			</div>
			<div class="clear"></div>
		</div>
	{% endfor %}
	</div>
{% else %}
	<p>No stories have been published.</p>
{% endif %}
{% endblock %}
